<template>
  <div id="guide-fund">
    <div class="header">
      <span class="_icon _i1" @click="goTo('/objindex')"><i class="el-icon-arrow-left"></i></span>
      <span class="_txt" style="color:#fff">投资引导</span>
      <span class="_icon _i2" @click="goTo('/setting')">
        <i class="el-icon-more-outline"></i>
      </span>
    </div>
    <div class="_form">
      <div class="_box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="即时配送" >
            <div class="_button">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </div>
          </el-form-item>
           <el-form-item label="相关条约" prop="type">
            <el-checkbox v-model="ruleForm.type">
              <span style="color:green;text-decoration:underline" @click="toShow(1)">服务条款及项目合约</span>
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" round @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="goTo('/objindex')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="coverPage" v-show="showCover===true">
      <div class="_box">
        <span class="_icon" @click="toShow(0)">
          <i class="el-icon-close"></i>
        </span>
        <div class="_txtarea _img"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
       ruleForm: {
          name: '',
          region: '',
          delivery: false,
          type:false,
          resource: '',
       },
       rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          type: [
            {  type: false, message: '请务必阅读服务条款及相关合约', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
        },
        showCover:false,
    }
  },
  methods: {
    goTo:function(Path){
      this.$router.replace(Path);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    toShow(ob){
      if(ob===1){
        this.showCover = true
      }else this.showCover = false 
    },
  }
}
</script>


<style scoped>
/*全局样式 */
  div,span{
    display: block;
  }
  span{
    text-align: center;
    display: block;
  }
  #guide-fund{
    width: 100%;
    height: 100%;
  }
  .header{
    width: 100%;
    height: 50px;
    background: #FF6600;
    position: fixed;
    z-index: 100;
  }
  ._form{
    width: 100%;
    position:absolute;
    top: 50px;
  }
/*header*/
  .header ._txt{
    height:50px;
    text-align:center;
    font-weight: 600;
    font-size: 20px;
    width: 50%;
    position: absolute;
    left:25%;
    line-height: 50px;
  }
  .header ._icon{
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    font-size:35px; 
    color:#666;
    line-height: 50px;
    text-align:center;
  }
  .header ._i1{
    font-size: 30px;
    left:0;
  }
/*form */
  ._form ._box{
    width: 90%;
    position: relative;
    margin: 20px auto;
  }
  ._form ._button{
    position:absolute;
    top:25%;
  }
/*coverPage */
  .coverPage {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    z-index: 500;
    background: rgba(0,0,0,0.3);

  }
  .coverPage ._box{
    position: absolute;;
    width: 80%;
    height: 90%;
    top:5%;
    left:10%;
    background: #fff;
    overflow: auto;
    border-radius: 10px;
  }
  .coverPage ._icon{
    font-size: 20px;
    color: #666;
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10%;
    line-height: 40px;
    z-index: 900;
  }
  .coverPage ._txtarea{
    width: 96%;
    position: relative;
    margin: 5px auto;
    border-radius: 10px;
    background: #ccc;
  }
</style>
